import React, { Component, PropTypes } from 'react';
import { Form, Icon, Input, Button, Checkbox, message, Modal, Calendar } from 'antd';
import Md5 from 'js-md5';
import { connect } from 'dva'
import Style from './index.less';
import Service from '../service';
import Moment from 'moment';
import $ from 'jquery';
const FormItem = Form.Item;
var map, point;
var pageMoreW = false;

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [],
      page: 1,
      pageSize: 10,
      searchValue: '',
      isCalender: false,
      videList: [],
      calandarValue: '',
      calandarText: ''
    }
  }
  componentDidMount() {
    let self = this;
    const account = localStorage.getItem('account');
    self.expressindexFun(account);
    let M = Moment().format('YYYY-MM');
    self.setState({
      calandarText: M
    })
    // this.props.queryStatistics({ token: token })
    // this.entityListFun();
    self.expressindexFun()
    $(window).scroll(function () {
      // console.log(4444)
      let totalNum = self.props.totalPage;
      let currentNum = self.state.page * self.state.pageSize;
      // console.log($(window).scrollTop() + $(window).height())
      // console.log( $(document).height())
      if ($(window).scrollTop() + $(window).height() == $(document).height() - 1) {
        // console.log(111)
        if (self.props.SMore) {
          self.pageMore(self.state.page);
        }

      }
    });
  }
  componentWillUnmount() {
    let self = this;
    self.props.urlStatus({
      url: '/uvideolist'
    });
  }
  expressindexFun = (mobile) => {
    let self = this;
    const token = localStorage.getItem('token');
    self.props.expressindex({
      params: {
        token: token,
        page: self.state.page,
        pageSize: self.state.pageSize
        // status: 0,
      },
      func: function (result) {
        if (result && result.total_page > 1) {
          pageMoreW = true
          // self.setState({
          //   videList: result.list
          // })
        }

      }
    })
    self.setState({
      page: 1
    })

  }
  pageMore = (page) => {
    let self = this;
    const token = localStorage.getItem('token');
    self.setState({
      page: page + 1
    }, function () {
      self.props.expressindex({
        params: {
          token: token,
          page: self.state.page,
          limit: self.state.pageSize
        },
        func: function (data) {

        }
      })
      // console.log(this.state.page);
      // this.props.queryList({ token: token, level: this.state.level, id: this.state.id,keywords:this.state.keywords,page:this.state.page,pageSize:this.state.pageSize });
    });

  }
  // 返回
  returnFun = () => {
    this.context.router.push(`/umy`);
  }
  //  签收
  signFun = () => {
    Modal.success({
      title: '确认签收',
      content: '',
    });
    this.context.router.push(`/ucomment`);
  }
  // 拒签
  nosignFun = () => {
    this.context.router.push(`/unocomment`);
  }
  onPanelChange = (value, mode) => {
    let self = this;
    const token = localStorage.getItem('token');
    let t = Moment(value)
      .format('YYYY-MM');
    let r = Moment(value)
      .format('dd');

    let Timestamp = Moment(value).format('X'); // 获取时间戳
    self.setState({
      calandarText: t,
      isCalender: false
    })

    self.props.expressindex({
      params: {
        token: token,
        date: Timestamp,
        page: 1,
        pageSize: self.state.pageSize
      },
      func: function (result) {
        if (result) {
          self.setState({
            videList: result.list
          })
        }

      }
    })


  }
  calenderFun = () => {
    let self = this;
    if (self.state.isCalender) {
      self.setState({
        isCalender: false
      })
    } else {
      self.setState({
        isCalender: true
      })
    }

  }
  // 我的
  myUrlFun = () => {
    this.context.router.push(`/umy`);
  }
  //  进入详情
  detailFun = (record) => {
    if (record && record.status == 0) {
      this.props.saveVideoStatus(record)
      this.context.router.push(`/usign`);
    }
  }
  render() {
    const { getFieldDecorator } = this.props.form;
    const { videList } = this.props;
    const statusArr = ['待签收', '已签收', '已拒收'];
    // console.log(videList)
    return (
      <div className={Style.wrap}>
        <div className={Style.headWrap}>
          <div className={Style.navTitle}>
            <span className={Style.arrow} onClick={this.returnFun}>
              <Icon type="left" />
            </span>
            视频清单
            <span onClick={this.myUrlFun} className={Style.arrow + ' ' + Style.arrowText}>我的</span>
          </div>
        </div>
        <div className={Style.filterTitle}>
          按日期筛选：{this.state.calandarText}<Icon onClick={this.calenderFun} type="calendar" style={{ fontSize: '20px', marginLeft: '3px', color: '#000' }} />
          {this.state.isCalender &&
            <div className={Style.filterCalender}>
              <Calendar fullscreen={false} onSelect={this.onPanelChange} />
            </div>
          }

        </div>

        <div className={Style.dataWrap + ' ' + Style.dataWrapVideo}>
          <div className={Style.videolistWrap}>

            <div className={Style.filterItem}>
              {videList && videList.map((item, index) => {
                return (
                  <dl onClick={this.detailFun.bind(this, item)}>
                    <dt>
                      <video src={`${Service.qiniuUrl}/` + item.video} width="320" height="240" controls="controls">
                        Your browser does not support the video tag.
          </video>
                    </dt>
                    <dd>
                      <p className={Style.linebd}>快递员手机号:{item.e_bike_mobile}</p>
                      <p>发送时间：{Moment(item.createtime * 1000).format("YYYY/MM/DD HH:mm:ss")}</p>
                      <div className={Style.status}>
                        <Icon type="check-square" /> 签收状态：{statusArr[item.status]}
                      </div>
                    </dd>
                  </dl>

                )
              })}

            </div>
          </div>
        </div>
      </div>
    )
  }
}

App.contextTypes = {
  router: React.PropTypes.object
}

function mapStateToProps(state, ownProps) {
  return {
    videList: state.umodel.Slist,
    SMore: state.umodel.SMore
  }
}
function dispatchToProps(dispatch) {
  return {
    expressindex(payload, params) {
      dispatch({
        type: 'umodel/expressindex',
        payload
      })
    },
    saveVideoStatus(payload, params) {
      dispatch({
        type: 'umodel/saveVideoStatus',
        payload
      })
    },
    urlStatus(payload, params) {
      dispatch({
        type: 'myHome/urlStatus',
        payload
      })
    }
  }
}
export default connect(mapStateToProps, dispatchToProps)(Form.create()(App));
